通过 Vue.directive 进行权限校验

MuYan2021-09-15VueVue

在日常开发中，总会有权限控制相关的需求。这里讲解一个通过Vue.directive 自定义指令open in new window实现的方法。

该方法只适用于路由相关页面内元素权限校验，如是路由权限，请自行定义。
定义 action.js

// action.js
import Vue from "vue";
const action = Vue.directive("action", {
  inserted: async function(el, binding, vnode) {
    const actionName = binding.arg || binding.value;
    // 判断是否多权限
    const isArray = Array.isArray(actionName);
    // 使用前端自定义的页面相关权限，如需与后端共同定义，启用以下注册方法
    // 前端自定义权限依托于 路由（router）对象，具体内容参考后续介绍
    const permissions = vnode.context.$route.meta.permission;
    // 使用与后端共同定义的页面相关权限，获取用户权限，getUserPermissions 内容与实现定义
    // const permissions = await getUserPermissions();
    if (
      (isArray && actionName.some((e) => permissions.includes(e))) ||
      permissions.includes(actionName)
    )
      (el.parentNode && el.parentNode.removeChild(el)) ||
        (el.style.display = "none");
  },
});

export default action;

注：前端自定义的页面相关权限方法只能获取当前路由页的相关 permission 参数，如不满足需求，请自行定义相关权限方法
如是使用前端自定义的页面相关权限，需要于项目内路由（router）对象内定义 key 为 meta 的对象，再于 meta 对象内定义 permission 参数。相关参数、示例如下

{
    path: '/home',
    name: 'home',
    component: import('@/**********'),
    meta: {
        title: '首页',
        permission: ['eidt', 'add']
    }
}

全局注册

// main.js
import "./action";

使用方法，在需要控制 action 级别权限的组件或标签上使用

<template>
  <!-- v-action:[method] 单权限使用方法 -->
  <button v-action:eidt>编辑</button>
  <!-- v-action="[method]" 多权限使用方法，使用数组方式 -->
  <button v-action="['eidt', 'add']">编辑</button>
</template>

昵称

邮箱

网址

按正序
按倒序
按热度

通过 Vue.directive 进行权限校验

预览: